<template>
  <div id="order">
    <mt-header fixed title="订单">
      <router-link to="/msite" slot="left">
        <i class="iconfont icon-arrow_lift"></i>
      </router-link>
    </mt-header>
    <div class="order-b">
      <!--未登录前页面  -->
      <div v-if="orderState" class="order-bf">
        <img src="//fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif">
        <p>登录后查看外卖订单</p>
        <router-link to='/login/note'>立即登录</router-link>
      </div>
      <!--登陆后页面  -->
      <div v-else class="order-bl">
        <ul>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'order',
  computed: {
    ...mapState(['orderState'])
  },
  methods: {
    ...mapMutations({
      showTab: 'SHOWTAB'
    })
  },
  mounted: function () {
    this.showTab()
  }
}
</script>

<style scoped lang='scss'>
@import '../../static//hotcss/px2rem.scss';
#order{
  width: 100%;
  height:100%;
  box-sizing: border-box;
  padding-top: px2rem(88);
  .mint-header {
    height: px2rem(88);
    font-size: px2rem(36);
    background-image: linear-gradient(90deg, #0af, #0085ff);
  }

  .mint-header a {
    text-decoration: none;
  }

  .mint-header i {
    font-size: px2rem(36);
  }
  .order-b{
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .order-bf{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p{
        font-size: px2rem(34);
        color: #6a6a6a;
        margin: px2rem(25) 0;
      }
      a{
        display: inline-block;
        width: px2rem(240);
        font-size: px2rem(30);
        color: #fff;
        background: #56d176;
        border-radius: px2rem(10);
        padding: px2rem(20);
        text-align: center;
        text-decoration: none;
      }
    }
    
  }
}
</style>
